<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            width: 300px;
            height: 300px;
            border: 5px solid deepskyblue;
            border-radius: 50%;
        }
        .box i{
            display: block;
            width: 300px;
            height: 300px;
            position: absolute;
            left: -10px;
            top: -10px;
            border-radius: 50%;
            border: 10px solid transparent;
            /*旋转*/
            /*animation:circleRoate 3s  infinite;*/
            animation:circleRoate 2s;
            animation-timing-function:linear;
            
        }
        .box i span{
            position: absolute;
            left: 239px;
            top: 24px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: dodgerblue;
        }
        @keyframes circleRoate{
            from{transform: rotate(0deg);}
            /*to{transform: rotate(360deg);}*/
            to{transform: rotate(135deg);}
        }
    </style>
</head>
<body>
    <div class="box">
        <i><span></span></i>
    </div>
</body>
</html>